<html>

<head>
    <meta charset="utf-8" />
    <title>login</title>
    <link rel="stylesheet" href="css/loginPage.css">
    <link rel="stylesheet" href="utils\layui\css\layui.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="utils/jquery-3.5.1.min.js"></script>
    <script src="utils/axios.min.js"></script>
    <script type="module" src="js/loginPage.js"></script>
    <script src="utils\layui\layui.js"></script>

    <link rel="stylesheet" href="utils/speech-input.css">
    <script src="utils/speech-input.js"></script>



</head>

<body>
    <div class="login-left"></div>
    <div class="login-right">
        <!-- 登录表单 -->
        <form class="layui-form login-form" action="">
            <input class="input-username layui-input" type="text" value="" placeholder="  账 号" lay-affix="clear">
            <input class="input-password layui-input" type="password" value="" placeholder="  密 码" lay-affix="eye">
            <button type="button" class="button-submit layui-btn layui-btn-primary">登录</button>
            <span class="to-create">去注册 →</span>
            <span class="to-code">验证码登录 </span>
            <div class="agree">
                <input class="checkbox-agree" type="checkbox">我已阅读并同意<a href="officialWebsites\agree.html">《用户协议》和《隐私协议》</a>
            </div>
        </form>
        <!-- 验证码登录表单 -->
        <form class="layui-form code-form" action="">
            <input class="layui-input input-logcode" type="text" placeholder="  邮 箱" lay-affix="clear">
            <input class="input-code layui-input" placeholder="  请输入验证码 ">
            <button type="button" class="layui-btn layui-btn-primary get-logcode" lay-on="get-logcode">获取验证码</button>
            <button type="button" class="layui-btn layui-btn-primary button-logcode">登录</button>
            <span class="to-mail">密码登录 </span>
            <div class="agree">
                <input class="checkbox-agree-code" type="checkbox">我已阅读并同意<a href="officialWebsites\agree.html">《用户协议》和《隐私协议》</a>
            </div>
        </form>
        <!-- 注册表单 -->
        <form class="layui-form create-form" action="">
            <input class="input-email layui-input" type="text" placeholder="  邮 箱" lay-affix="clear">
            <input class="input-vercode layui-input"  placeholder="  请输入验证码 ">
            <button type="button" class="get-vercode layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
            <button type="button" class="button-create layui-btn layui-btn-primary">注册</button>
            <span class="to-login">去登录 →</span>
            <div class="agree">
                <input class="checkbox-agree-create" type="checkbox">我已阅读并同意<a href="officialWebsites\agree.html">《用户协议》和《隐私协议》</a>
            </div>
        </form>
        <!-- 个人信息表单 -->
        <form class="layui-form userInfo-form" action="">
            <input class="input-setname layui-input" type="text"  placeholder="姓名" lay-affix="clear">
            <div class="input-setgender">
                <select class="select-setgender">
                    <option value="">性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <input class="input-setmail layui-input" disabled type="text" placeholder="  邮 箱" lay-affix="clear">
            <input class="input-setpsd layui-input" type="text" placeholder="  密 码" lay-affix="clear">
            <button type="button" class="button-userInfo layui-btn layui-btn-primary">完成注册</button>
            <span class="userInfo-to-login">去登录 →</span>
        </form>
        <!-- 登录成功 -->
        <div class="login-success">
            <div class="head">
                <span class="user-pic">
                     <img src="" id="userHead">
                </span>
                <span class="sethead">更换头像
                      <input class="select" type="file" accept="image/*">
                </span>
            </div>

            <div class="name">
                <span id="name">昵称：</span>
                <button class="setName">修改昵称</button>
                <div class="set">
                   <input class="input-setNewName layui-input" type="text" placeholder="请输入新昵称" style="display: inline;">
                  <button class="no">取消</button>
                  <button class="yes">确认</button> 
                </div>
                
            </div>

            <div class="sex">
                <span id="sex">性别：</span>
                <div class="layui-form setSex" >
                    <select class="select-setgender" lay-filter="demo-select-filter">
                        <option value="">请选择性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>
            
            <button class="setPsd">修改密码</button>
            <div class="setNewPsd">
                <div class="oldPsd">
                    旧密码：<input class="input-oldPsd layui-input" type="text" placeholder="请输入旧密码" style="display: inline;">
                </div>
                <div class="newPsd">
                    新密码：<input class="input-newPsd layui-input" type="text" placeholder="请输入新密码" style="display: inline;">
                </div>
                <button class="layui-btn layui-btn-primary" id="setPsd">确认修改</button>
            </div>
            
            <button class="logout layui-btn layui-btn-primary">退出登录</button>
        </div>

        <!-- 微信登录 -->
        <button class="weixin">
            <div class="weixin-pic"></div>
            <div class="weixin-text">微信登录</div>
        </button>
        

        <!-- 在右边定位的图片和文字 -->
        <div class="imgs">
            <div class="logo"></div>
            <div class="bg-circle1"></div>
            <div class="bg-circle2"></div>
            <div class="bg-circle3"></div>
            <div class="bg-smoke1"></div>
            <div class="bg-smoke2"></div>
            <div class="bg-smoke3"></div>
            <div class="bg-lantern"></div>
            <div class="bg-flower"></div>
            <div class="bg-text1"></div>
            <div class="bg-text2"></div>
            <div class="bg-text3"></div>
        </div>
        <!-- 语音 -->
        <div class="speech">
            <input type="text" class="message-input speech-input" placeholder="Message" lang="zh-CN">
        </div>
        
        

    </div>
    

</body>

</html>